<template>
  <div class="box">
    <el-card class="card">
      <el-form>
        <el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="search">
                <label>
                  分类名称:
                </label>
                <el-input v-model="name" placeholder="输入分类名称" style="width: calc(100% - 100px)" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search vm">
                <el-button
                  style="margin-left: calc(100% - 100px)"
                  type="primary"
                  icon="el-icon-search"
                  @click="onSubmit"
                >搜索
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div class="title">
        总数: {{ total }}
      </div>
      <el-table
        :data="list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="ID"
        >
          <template slot-scope="scope">
            <div class="tDiv">
              <!--              {{scope.row}}-->
              <span>{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="项目名称"
        >
          <template slot-scope="scope">
            <div class="tDiv">
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="项目描述"
        >
          <template slot-scope="scope">
            <div class="tDiv">
              <span>{{ scope.row.remarks }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="添加时间"
        >
          <template slot-scope="scope">
            <div class="tDiv">
              <span>{{ parseTime(scope.row.createtime, '{yyyy}-{mm}-{dd} {hh}:{ii}:{ss}') }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="是否开启商品"
        >
          <template slot-scope="scope">
            <div class="tDiv">
              <el-button
                v-if="scope.row.isopen == 1"
                type="success"
                @click="getOpenclose(scope.row.id,scope.row.isopen)"
              >是
              </el-button>
              <el-button
                v-if="scope.row.isopen == 2"
                type="info"
                @click="getOpenclose(scope.row.id,scope.row.isopen)"
              >否
              </el-button>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text">
              <!--              <span @click="jumpDetail(scope.row.id)">详情</span>-->
              <!--              <span class="line">|</span>-->
              <span @click="handelEdit(scope.row.id,scope.row.isopen)">编辑</span>
            </el-button>
            <span class="line">|</span>
            <el-button type="text" @click="delGoods(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <div class="left">
          <el-button type="primary" @click="JumpAdd()">新增项目</el-button>
        </div>
        <div class="page">
          <el-pagination
            background
            :current-page="pageNum"
            :page-sizes="[3, 5, 10, 10000]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import { CateDelete, getOpenclose, goodsCategoryList } from '../../api/cate'
import { parseTime } from '../../utils'

export default {
  name: 'CateList',
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 3,
      name: '',
      total: 0,

      flag: false,

      radio: 1
    }
  },
  created() {
    this.goodsCategoryList()
  },
  methods: {
    // 是否开启分类商品
    getOpenclose(id, isopen) {
      console.log(4444, isopen)
      const data = {
        id: id,
        // eslint-disable-next-line eqeqeq
        isopen: isopen == '1' ? '2' : '1'
      }
      getOpenclose(data).then((res) => {
        console.log('是否开启分类商品', res)
        this.goodsCategoryList()
      })
    },

    // 搜索
    onSubmit() {
      this.flag = true
      this.goodsCategoryList()
    },

    // 新增跳转
    JumpAdd() {
      this.$router.push({
        path: '/cate/add',
        query: {
          back: 1
        }
      })
    },

    // 获取分类商品列表
    goodsCategoryList() {
      if (this.flag) {
        this.pageNum = 1
      }
      this.flag = false
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: ''
      }
      console.log(data)
      goodsCategoryList(data).then(res => {
        console.log('获取分类商品列表', res.data)
        if (res.code === 0) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },

    // 删除
    // delGoods(id) {
    //   const data = {
    //     id: id
    //   }
    //   console.log(data);
    //   delteGoods(data).then(res => {
    //     console.log(res);
    //     if (res.code === 0 ) {
    //       // this.$message.success("操作成功");
    //       this.getGoodsList()
    //     }
    //   })
    // },

    delGoods(id) {
      this.$confirm('此操作将永久删除该分类商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: id
        }
        CateDelete(data).then(res => {
          console.log(res)
          // eslint-disable-next-line eqeqeq
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.goodsCategoryList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 编辑
    handelEdit(id, isopen) {
      console.log('id', id)
      console.log('isopen', isopen)

      this.$router.push({
        path: '/cate/add',
        query: {
          id: id,
          back: '2',
          isopen: isopen
        }
      })
    },

    // 分页器函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.goodsCategoryList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.goodsCategoryList()
      console.log(`当前页: ${val}`)
    },

    // 时间转换器
    parseTime(time, formmat) {
      // eslint-disable-next-line no-undef
      return parseTime(time, formmat)
    }

  }

}

</script>

<style scoped lang="less">
  .box {
    padding: 20px;

    .card {
      margin-bottom: 20px;
      /*width: 80%;*/
    }

    /*表单的样式*/

    .search {
      display: flex;
      justify-content: start;
      align-items: center;

      label {
        width: 100px;
        text-align: right;
        margin-right: 15px;
      }
    }

    /*.page {*/
    /*  text-align: right;*/
    /*  margin-top: 30px;*/
    /*}*/
    /*.left {*/
    /*  margin-top: 20px;*/
    /*}*/
    /*表格盒子的样式*/

    .bottom {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /*total*/

    .title {
      margin: 10px 10px 30px 10px;
      padding: 10px 15px;
      background: #5f8ffe;
      color: white;
      border-radius: 10px;
    }
  }
</style>

